<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.点击键盘按钮 弹起时出发 ;keyup事件不会区分大小写，大小写字母的ASCII码都是一样
        document.addEventListener("keyup",function(e){
            console.log('按键松开后触发!')
            console.log('keyup:'+e.keyCode)
        })
        //2.按下键盘后触发 keypress可识别 ctrl shift 以及箭头键等功能键;
        // keydown事件不会区分大小写，大小写字母的ASCII码都是一样
        document.addEventListener("keydown",function(e){
            console.log('按键后触发down')
            console.log('keydown:'+e.keyCode)
        })
        //3.按下键盘后触发 keypress无法识别 ctrl shift 以及箭头键等功能键;
        //keypress事件会区分大小写，大小写字母的ASCII码都不一样
        document.addEventListener("keypress",function(e){
            console.log('按键后触发press')
            console.log('keypress:'+e.keyCode)
        })
        //4.键盘点击事件的先后触发顺序 ： Keydown -> keypress -> keyup
    </script>
</body>
</html>